import React, { useState } from "react";
import styles from "./Index.module.css";
import { Button, List, SearchBar } from "antd-mobile";
import instance from "../../api/request";
import dayjs from "dayjs";
import { useNavigate } from "react-router-dom";
function Index() {
  const [search, setSearch] = useState([]);
  const [keyWord, setKeyWord] = useState("");

  //是否执行过搜索
  const [hasSearch, setHasSearch] = useState(true);

  const nav=useNavigate()


  //搜索历史
  const [history,setHistory]=useState([])

  const getsou = (kw) => {
    const v = (kw || '').trim();
    if (!v) return; // 空关键词不触发
    setHasSearch(true); // 进入结果态，隐藏历史
    instance
      .get("/api/user/sickCircle/v1/searchSickCircle", {
        params: {
          keyWord: v,
        },
      })
      .then((res) => {
        console.log(res, "=====搜索");
        setSearch(res.data.result);
        setHistory((prev)=>[...prev,v])
      });
  };

  return (
    <div className={styles.searchz}>
      <div className={styles.search}>
        <SearchBar
          value={keyWord}
          className={styles.sousk}
          placeholder="请输入内容"
          onSearch={() => getsou(keyWord)}
          onChange={(val) => {
            setKeyWord(val);
            //当搜索框清空时，隐藏搜索结果
            if (!val.trim()) {
              //历史搜索结果出来
              setHasSearch(false);
              setSearch([]);
            }
          }}
        />
        <Button
          fill="none"
          className={styles.btn}
          onClick={() => getsou(keyWord)}
        >
          搜索
        </Button>
      </div>

      {!hasSearch && (
        <div className={styles.history}>
          <span style={{ color: "green" }}>搜索历史</span>
          <div>
            {
              history.map((item,index)=>{
                return <List.Item
                key={index}
                onClick={()=>{
                  setKeyWord(item); // 回填关键词
                  setHasSearch(true); // 切到结果态
                  getsou(item); // 触发搜索
                }}  
                >
                  {item}
                </List.Item>
              })
            }
          </div>
        </div>
      )}

      {hasSearch && (
        <div className={styles.list}>
          {search.map((item, index) => {
            return (
              <div key={index} className={styles.listn} onClick={()=>nav(`/bingydetail/${item.sickCircleId}`)}>
                <div>
                  <h1 style={{ marginTop: "10px", marginLeft: "10px" }}>
                    {item.title}
                  </h1>
                </div>

                <div>
                  <p style={{ marginTop: "10px", marginLeft: "10px" }}>
                    {dayjs(item.releaseTime).format("YYYY-MM-DD HH:mm:ss")}
                  </p>
                </div>

                <div>
                  <p style={{ marginTop: "10px", marginLeft: "10px" }}>
                    {item.detail}
                  </p>
                </div>

                <div style={{ marginTop: "10px", marginLeft: "10px" }}>
                  <span style={{ marginLeft: "270px" }}>
                    收藏{item.collectionNum}
                  </span>
                  <span style={{ marginLeft: "10px" }}>
                    建议{item.commentNum}
                  </span>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

export default Index;
